<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="消息类型">
              <j-dict-select-tag placeholder="请选择消息类型" v-model="queryParam.msgType" dictCode="im_msg_type"/>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="发送者ID">
              <a-input placeholder="请输入发送者ID" v-model="queryParam.userId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="接收者ID">
              <a-input placeholder="请输入接收者ID" v-model="queryParam.toUserId"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="5" :lg="7" :md="8" :sm="24">
            <a-form-item label="内容">
              <a-input placeholder="请输入内容" v-model="queryParam.content"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="4" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <a-tabs default-active-key="1" @change="tabChange">
      <a-tab-pane key="1" tab="异常记录">
      </a-tab-pane>
      <a-tab-pane key="2" tab="正常记录">
      </a-tab-pane>
    </a-tabs>
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="fileSlot" slot-scope="text,record">
          <span v-if="record.msgType=='RC:ImgMsg'">
<!--            <img :src="text" preview height="30px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>-->
            <img :src="'data:image/jpg;base64,'+ JSON.parse(record.msgJson).content" preview height="30px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </span>
          <span v-else-if="record.msgType=='RC:SightMsg'">
            <img @click="openVideo(text)" src="~@/assets/video.png" height="30px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </span>
          <span v-else-if="record.msgType=='RC:HQVCMsg'" style="height: 30px">
              <audio ref="audioPlayer" :src="text" style="height: 40px" controls></audio>
          </span>
          <span v-else>
            {{text}}
          </span>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="openBanaccountModal(record)">封号</a>
          <a-divider type="vertical" />
          <a @click="bianImMsg(record)">禁言</a>
        </span>

      </a-table>
    </div>

    <message-info-modal ref="modalForm" @ok="modalFormOk"></message-info-modal>

    <!-- 视频播放器 -->
    <a-modal v-model="videoVisible" :width="800" @cancel="videoClose" :footer="null" destroyOnClose="true">
      <div style="margin-top: 20px;height: 1000px">
        <vue-core-video-player
          :loop="false"
          autoplay="false"
          style="width: 100%;height: 100%"
          :src="videoUrl"
        ></vue-core-video-player>
      </div>
    </a-modal>

    <BanaccountModal ref="BanaccountModal" @ok="modalFormOk"></BanaccountModal>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MessageInfoModal from './modules/MessageInfoModal'
  import BanaccountModal from '@/views/xiny/security/banaccount/modules/BanaccountModal'
  import VueCoreVideoPlayer from 'vue-core-video-player'

  export default {
    name: 'MessageInfoList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      MessageInfoModal,
      BanaccountModal
    },
    data () {
      return {
        description: '全部聊天记录管理页面',
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'发送人昵称',
            align:"center",
            dataIndex: 'userName'
          },
          {
            title:'发送人ID',
            align:"center",
            dataIndex: 'userId'
          },
          {
            title:'接收人昵称',
            align:"center",
            dataIndex: 'toUserName'
          },
          {
            title:'接收人ID',
            align:"center",
            dataIndex: 'toUserId'
          },
          {
            title:'消息类型',
            align:"center",
            dataIndex: 'msgType_dictText'
          },
          {
            title:'消息内容',
            align:"center",
            dataIndex: 'content',
            scopedSlots: { customRender: 'fileSlot'}
          },
          {
            title:'发送时间',
            align:"center",
            dataIndex: 'msgTime'
          },
          {
            title:'消息状态',
            align:"center",
            dataIndex: 'status_dictText'
          },
          {
            title:'异常信息',
            align:"center",
            dataIndex: 'errorInfo'
          },
          {
            title:'requestId',
            dataIndex: 'auditDetail',
            align:"center",
            fixed:"right",
            width:147,
            customRender:function (text) {
              if(text){
                return JSON.parse(text).requestId;
              }
              return text;
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/message/messageInfo/list",
          delete: "/message/messageInfo/delete",
          deleteBatch: "/message/messageInfo/deleteBatch",
          exportXlsUrl: "/message/messageInfo/exportXls",
          importExcelUrl: "message/messageInfo/importExcel",

        },
        dictOptions:{},
        superFieldList:[],
        disableMixinCreated:true,

        videoVisible:false,
        videoUrl:"",
      }
    },
    created() {
      this.queryParam.status='1';
      this.loadData(1);
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      //关闭播放器
      videoClose(){
        this.videoUrl = "";
        this.videoVisible = false;
      },
      //打开
      openVideo(url){
        this.videoUrl = url;
        this.videoVisible = true;
      },
      //重置
      searchReset() {
        var status=this.queryParam.status;
        this.queryParam = {status:status},
        this.loadData(1);
      },

      //tab切换
      tabChange(val){
        if(val=='1'){
          this.queryParam.status=val;
          this.loadData(1);
        }else{
          this.queryParam.status='';
          this.loadData(1);
        }
      },
      //封号
      openBanaccountModal(record){
        var obj={};
        obj.roomMsgId = record.msgId;
        obj.womanName = record.userName;
        obj.womanId = record.userId;
        obj.whatType="2";//2代表IM消息
        obj.type="1";//1代表封号类型

        this.$refs.BanaccountModal.edit(obj);
        this.$refs.BanaccountModal.title = "封号";
        this.$refs.BanaccountModal.disableSubmit = false;
      },

      //禁言
      bianImMsg(record){
        var obj={};
        obj.roomMsgId = record.msgId;
        obj.womanName = record.userName;
        obj.womanId = record.userId;
        obj.whatType="2";//2代表IM消息
        obj.type="2";//2代表禁言类型

        this.$refs.BanaccountModal.edit(obj);
        this.$refs.BanaccountModal.title = "禁言";
        this.$refs.BanaccountModal.disableSubmit = false;
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>